<template>
  <div
    class="column video-card-small"
    @mouseover="isHover = true"
    @mouseout="isHover = false"
  >
    <div class="preview">
      <q-img class="image" :src="video.coverImage" @click="gotoVideo()">
        <template v-slot:error>
          <div class="absolute-full flex flex-center bg-negative text-white">
            Cannot load image
          </div>
        </template>
      </q-img>
      <q-btn
        class="bookmark-btn"
        size="10px"
        icon="mdi-bookmark-plus"
        color="primary"
        style="top: 8px; right: 8px"
        dense
        @click="addShortcuts"
      >
        <q-tooltip
          anchor="center left"
          self="center right"
          :offset="[0, 0]"
          transition-show="fade"
          transition-hide="fade"
        >
          <div class="bookmark-btn-tooltip">PIN TO SHOTCUTS</div>
        </q-tooltip>
      </q-btn>
      <q-btn
        class="bookmark-btn"
        size="10px"
        icon="mdi-playlist-plus"
        color="primary"
        style="top: 40px; right: 8px"
        dense
        @click="addPlaylist"
        v-show="isHover"
      >
        <q-tooltip
          anchor="center left"
          self="center right"
          :offset="[0, 0]"
          transition-show="fade"
          transition-hide="fade"
        >
          <div class="bookmark-btn-tooltip">SAVE TO PLAYLIST</div>
        </q-tooltip>
      </q-btn>
      <div class="duration-text">{{ video.durationLabel }}</div>
    </div>
    <div class="info-container column">
      <div class="hover-info" v-show="isHover">{{ video.creatorName }}</div>
      <div class="title one-line-text">{{ video.title }}</div>
      <div class="create-time">{{ video.createTimeHuman }}</div>
    </div>
    <div class="translator-container row items-center">
      <q-avatar class="q-ml-md" size="40px">
        <img src="/images/default-avatar.png" />
      </q-avatar>
      <div class="column justify-center">
        <div class="q-ml-sm" style="font-size: 12px">
          {{ video.creatorName }}
        </div>
        <div class="row">
          <lang-chip code="en-US"></lang-chip>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Video from 'src/models/Video';
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import LangChip from '../LanguageChip.vue';
export default defineComponent({
  name: 'video-card-sm',
  components: {
    LangChip,
  },
  props: {
    video: {
      type: Video,
      required: true,
    },
  },
  setup(props) {
    const router = useRouter();
    const isHover = ref(false);
    return {
      isHover,
      gotoVideo(langCode = '') {
        if (props) {
          void router.push({
            name: 'Video',
            params: {
              id: props.video.id,
            },
          });
        }
      },
      addShortcuts() {
        console.log('Adding to Bookmark');
      },
      addPlaylist() {
        console.log('Adding to Bookmark');
      },
    };
  },
});
</script>
<style lang="scss" scoped>
.video-card-small {
  max-width: 236px;
  width: 236px;
  max-height: 256px;
  height: 256px;
  cursor: default;
  .preview {
    width: 236px;
    height: 136px;
    position: relative;
    .bookmark-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 28px;
      height: 28px;
    }
    .duration-text {
      position: absolute;
      bottom: 4px;
      right: 4px;
      font-size: 9px;
      background-color: #1c1c1c;
      padding: 2px 4px;
    }
  }
  .info-container {
    background-color: #1c1c1c;
    box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.4);
    z-index: 3;
    height: 52px;
    padding: 4px 12px;
    position: relative;
    .hover-info {
      top: -24px;
      position: absolute;
      background: rgba(16, 16, 16, 0.8);
      padding: 2px 4px;
      border-radius: 4px;
      font-size: 12px;
    }
    .title {
      max-width: 210px;
      font-size: 14px;
    }
    .create-time {
      font-size: 12px;
      color: #808080;
    }
  }
  .translator-container {
    background-color: #242424;
    height: 52px;
  }
}
</style>
